<template>
  <div class="my-order">
    <menu-content-layout title="我的订单">
      <template v-slot:icon>
        <img src="~/assets/images/my-order1.png" alt="" />
      </template>

      <template v-slot:content>
        <div class="large-tabs">
          <div
            class="packaging-materials"
            :class="largeActiveIndex === 0 && 'large-active'"
            @click="checkLargeTab(0)"
          >
            <img
              v-if="largeActiveIndex === 0"
              src="~/assets/images/packaging-materials.png"
              alt=""
            />
            <img v-else src="~/assets/images/packaging-materials1.png" alt="" />
            包装材料
          </div>
          <div
            class="supporting-service"
            :class="largeActiveIndex === 1 && 'large-active'"
            @click="$router.push({ name: 'MyOrderService' })"
          >
            <img
              v-if="largeActiveIndex === 1"
              src="~/assets/images/supporting-service1.png"
              alt=""
            />
            <img v-else src="~/assets/images/supporting-service.png" alt="" />
            配套服务
          </div>
        </div>

        <!-- 大tab下方区域 -->
        <div
          v-if="['MyOrder', 'MyOrderService'].includes($route.name)"
          class="after-large-tabs"
        >
          <menu-content-tabs
            :tabs="tabs"
            @switch-tab="handleSwitchTab"
            :defaltActive="defaltAcIndex"
          />

          <!-- 订单区域 -->

            <!-- 所有table区域 -->
            <OrderTable detailName='purchaseDetails' @reload='getList' :listStatus='listStatus' :list='list'/>
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
        <!-- 二级路由（订单详情） -->
        <router-view />
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MenuContentTabs from "@/components/common/menu-content-tabs/MenuContentTabs"
import { Table, TableColumn } from "element-ui"
import MButton from "@/components/common/m-button/MButton"
import MPagination from "@/components/common/m-pagination/MPagination"
import { myOrder } from "@/request/api"
import OrderTable from './components/OrderTable'

export default {
  name: "MyOrder",
  components: {
    MPagination,
    MenuContentLayout,
    MenuContentTabs,
    Table,
    TableColumn,
    MButton,
    OrderTable
  },
  data() {
    return {
      tabs: [
        {
          name: "全部",
          value: "-2"
        },
        {
          name: "已退款",
          value: "-1"
        },
        {
          name: "待发货",
          value: "1"
        },
        {
          name: "待收货",
          value: "10"
        },
        {
          name: "待评价",
          value: "15"
        },
        {
          name: "已完成",
          value: "20"
        }
      ],
      largeActiveIndex: 0,
      orders: [
        {
          data: []
        }
      ],
      page: 1,
      total: 1,
      list: [],
      listStatus: 1,
      limit: 20,
      state: 0,
      showDialog: false,
      optionId: "",
      defaltAcIndex: 0
    };
  },
  created() {
    this.state = this.$route.query.state || -2;
    this.defaltAcIndex = this.tabs.findIndex(v => v.value === this.state) || 0;
    this.getList();
  },
  methods: {
    getList() {
      this.list = [];
      this.listStatus = 1;
      this.$common.toTop();
      let data = {
        status: this.state,
        page: this.page,
        limit: this.limit,
        is_entity: this.largeActiveIndex === 1 ? '0' : '1'
      }
      myOrder(data).then((res) => {
        this.list = res.data.data||[]
        this.total = res.data.total
        if (this.total == 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({ top: 0 })
      }).catch(err => {
        this.listStatus = 0
        this.$message.error(err.message)
      })
    },
    checkLargeTab(index) {
      this.largeActiveIndex = index;
      if (index === 0) {
        this.$router.push({
          name: "MyOrder"
        });
      } else if (index === 1) {
        this.$router.push({
          name: "MyOrderService"
        });
      }
    },
    handleSwitchTab(index) {
      this.state = index.value;
      this.getList();
      // 详情页面中切换tab返回
      if (this.$route.name === "purchaseDetails") {
        this.$router.push({
          name: "MyOrder"
        });
      }
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    }
  }
};
</script>


<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.my-order {
 

  .large-tabs {
    display: flex;
    margin: -20px -20px;
    margin-bottom: 15px;

    .packaging-materials,
    .supporting-service {
      display: flex;
      align-items: center;
      padding-left: 20px;
      width: 50%;
      height: 65px;
      border: solid 1px $theme-color-1;
      color: $theme-color-1;
      font-size: 20px;
      margin-right: -1px;
      cursor: pointer;

      img {
        margin-right: 15px;
      }
    }

    .large-active {
      background-color: $theme-color-1;
      color: #fff;
    }
  }

  .after-large-tabs {
    .orders-wrap {
      margin-top: 40px;

      .table-head {
        background-color: #f3f4f7;
        margin-bottom: 40px;

        /deep/ .el-table__body-wrapper {
          height: 0;
        }

        /deep/ th {
          color: #666;
          background-color: #f3f4f7;
        }
      }

      
    }
  }
}
</style>
